<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
	<view v-else style="overflow: hidden;height: 100vh;">

		<view class="tap">
			<view class="tabs wap">
				<view class="tabs_item " :class="{'tabs_item_curr':tabInd == 0}" @click="setTab(0)">
					我发起的
				</view>
				<view class="tabs_item" :class="{'tabs_item_curr':tabInd == 1}" @click="setTab(1)">
					我报名的
				</view>
				<view class="tabs_item " :class="{'tabs_item_curr':tabInd == 3}" @click="setTab(3)">
					我预约的
				</view>
				<view class="tabs_item" :class="{'tabs_item_curr':tabInd == 2}" @click="setTab(2)">
					约我滑雪
				</view>
			</view>
		</view>
		<x-scroll :fixed="true" :isNav="false" @scroll="scroll" :offset="60" @onRefresh="onRefresh"
			@scrolltolower="scrolltolower" :refresh="_freshing">
			<!-- 球局 -->
			<view class="ball" v-if="tabInd == 0">
				<view class="ball_list wap" v-if="Array.isArray(MyApplyList.list) && MyApplyList.list.length > 0">
					<view class="item" v-for="(item,index) in MyApplyList.list" @click="toDetails(item)" :key="index">
						<view class="item_hd">
							<view class="left">
								<view @click.stop="previewImage(item.UserImgs)" class="cover mr30">
									<image :src="item.HeadImgUrl" mode="" />
								</view>
								<view @click.stop="nav_to(`/pages/user/user_visitor?id=${item.UserID}`)" class="name f1 c1">
									{{item.Name?$util.entitiesToUtf16(item.Name):"匿名"}}<text class="f2 c3 pl16">发起</text>
								</view>
							</view>
							<view class="right">
								<view>
									<text class="f2 c3">{{item.PlaceType}}</text>
								</view>
								<!-- 	<view class="f3 c_sed" v-if="item.Price == 0">免费</view> -->
							</view>
						</view>
						<view class="item_bd">
							<view class="lin f2 c2">
								<view class="imgbox_sm">
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710916701041846.png" mode=""></image>
								</view>
								{{getTime2(item.ServerDate) +" " +getWeek(item.ServerDate) + item.ServerTime }} 开始
							</view>
							<view class="lin lin f2 c2">
								<view class="imgbox_sm">
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17109167160911428.png" mode=""></image>
								</view>
								{{item.ShopID>0?item.ShopName:item.Place}}
							</view>

							<view class="lin flx">
								<view class="f2 c2">
									<view class="imgbox_sm">
										<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17109167294331333.png" mode=""></image>
									</view>
									买单方式：{{item.FeeRule}}
								</view>
								<view class="f2 c_sed" :class="{'textcolor1':item.Status == 0,'textcolor2':item.Status == 1,'textcolor3':item.Status == 3}">{{getBallStatusStr(item)}}</view>
							</view>

						</view>

					</view>
				</view>
				<block v-else>
					<u-empty mode="list" width="100" height="100"
						:icon="ossPath+'/upload/17124806786111367.png'" :show="true" iconSize="32"
						text="无组局"></u-empty>

				</block>
				<view style="height: 200rpx;"></view>
			</view>


			<view class="ball" v-if="tabInd == 1">

				<view class="ball_list wap" v-if="Array.isArray(MyTakeList.list) && MyTakeList.list.length > 0">
					<view class="item" v-for="(item,index) in MyTakeList.list" @click="toMyAttend(item)" :key="index">
						<view class="item_hd">
							<view class="left">
								<view @click.stop="previewImage(item.UserImgs)" class="cover mr30">
									<image :src="item.HeadImgUrl" mode="" />
								</view>
								<view @click.stop="nav_to(`/pages/user/user_visitor?id=${item.UserID}`)" class="name f1 c1">
									{{item.Item[0]?$util.entitiesToUtf16(item.Item[0].Name):"匿名"}}<text class="f2 c3 pl16">发起</text>
								</view>
							</view>
							<view class="right">
								<view>
									<text class="f2 c3">{{item.PlaceType}}</text>
								</view>
								<!-- 	<view class="f3 c_sed" v-if="item.Price == 0">免费</view> -->
							</view>
						</view>
						<view class="item_bd">
							<view class="lin f2 c2">
								<view class="imgbox_sm">
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710916701041846.png" mode=""></image>
								</view>
								{{getTime2(item.ServerDate) +" " +getWeek(item.ServerDate) + item.ServerTime }} 开始
							</view>
							<view class="lin lin f2 c2">
								<view class="imgbox_sm">
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17109167160911428.png" mode=""></image>
								</view>
								{{item.ShopID>0?item.ShopName:item.Place}}
							</view>

							<view class="lin flx">
								<view class="f2 c2">
									<view class="imgbox_sm">
										<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17109167294331333.png" mode=""></image>
									</view>
									买单方式：{{item.FeeRule}}
								</view>
								<view class="f2 c_sed" :class="{'textcolor1':item.Status == 0,'textcolor2':item.Status == 1,'textcolor3':item.Status == 3}">{{getBallStatusStr(item)}}</view>
							</view>

						</view>
					</view>
				</view>
				<block v-else>
					<u-empty mode="list" width="100" height="100"
						:icon="ossPath+'/upload/17124806786111367.png'" :show="true" iconSize="32"
						text="无组局"></u-empty>

				</block>
				<view style="height: 200rpx;"></view>
			</view>

			<view class="ball" v-if="tabInd == 2">

				<view class="ball_list wap" v-if="Array.isArray(MyRegisterList.list) && MyRegisterList.list.length > 0">
					<view class="item" v-for="(item,index) in MyRegisterList.list" @click="toMyrPrebook(item)" :key="index">
						<view class="myregbox">
							<view class="leftbox">
								<image class="heimg" :src="item.HeadImgUrl" mode=""></image>
								<view class="lename">{{item.Name?$util.entitiesToUtf16(item.Name):'匿名'}}</view>
								<view class="Initiator">发起人</view>
							</view>
							<view class="middbox">
								<view v-if="item.Success_Msg == '您已拒绝该球局'" class="mid_1">已拒绝</view>
                				<view v-else-if="item.Item[0].Status==1" class="mid_1">预约成功</view>
								<view v-else-if="item.Item[0].Status==-2" class="mid_1">已拒绝</view>
								<view v-else class="mid_1">预约中</view>
								<image class="mid_2" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17125606119631454.png"></image>
								<!-- <view v-if="item.PayStatus == 1" class="mid_3">待对方同意</view>
                				<view v-else-if="item.Status==1" class="mid_3">进行中</view>
               					 <view v-else-if="item.Success_Msg == '您已拒绝该球局'" class="mid_3">已拒绝</view>
								<view v-else class="mid_3">待你同意</view> -->
							</view>
							<view v-if="item.Item.length > 0" class="rightbox" v-for="(value,i) in item.Item" :key="i">
								<image class="rightimg" :src="value.HeadImgUrl" mode=""></image>
								<view class="rname">{{value.Name?$util.entitiesToUtf16(value.Name):'匿名'}}</view>
								<view v-if="value.Status == 1" class="rstate">已同意</view>
								<view v-else-if="value.Status == -2" class="rstate">已拒绝</view>
               					 <!-- <view v-else-if="item.Status==1" class="rstate">进行中</view> -->
                				<view v-else-if="item.Success_Msg == '您已拒绝该球局'" class="rstate">已拒绝</view>
								<view v-else class="rstate">待同意</view>
							</view>
						</view>							
					</view>
				</view>
				<block v-else>
					<u-empty mode="list" width="100" height="100"
						:icon="ossPath+'/upload/17124806786111367.png'" :show="true" iconSize="32"
						text="无组局"></u-empty>

				</block>
				<view style="height: 200rpx;"></view>
			</view>
			<!-- 球局结束 -->


			<!-- 私人球局列表 -->
			<view class="ball" v-if="tabInd == 3">

				<view class="ball_list wap" v-if="Array.isArray(privatelist ) && privatelist.length > 0">
					<view class="item" v-for="(item,index) in privatelist " @click="toDetails(item)" :key="index">
						<view class="item_hd">
							<view class="left">
								<view @click.stop="previewImage(item.UserImgs)" class="cover mr30">
									<image :src="item.HeadImgUrl" mode="" />
								</view>
								<view @click.stop="nav_to(`/pages/user/user_visitor?id=${item.UserID}`)" class="name f1 c1">
									{{item.Name?$util.entitiesToUtf16(item.Name):"匿名"}}<text class="f2 c3 pl16">发起</text>
								</view>
							</view>
							<view class="right">
								<view>
									<text class="f3 c3">{{item.AppointmentType == '私人球局'?'预约滑雪 ':'预约滑雪'}}</text>
								</view>
								<!-- 	<view class="f3 c_sed" v-if="item.Price == 0">免费</view> -->
							</view>
						</view>
						<view class="item_bd">
							<view class="lin f3 c2">
								<view class="imgbox_sm">
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710916701041846.png" mode=""></image>
								</view>
								{{getTime2(item.ServerDate) +" " +getWeek(item.ServerDate) + item.ServerTime }} 开始
							</view>
							<view class="lin lin f3 c2">
								<view class="imgbox_sm">
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17109167160911428.png" mode=""></image>
								</view>
								{{item.ShopID>0?item.ShopName:item.Place}}
							</view>

							<view class="lin flx">
								<view class="f3 c2">
									<view class="imgbox_sm">
										<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17109167294331333.png" mode=""></image>
									</view>
									买单方式：{{item.FeeRule}}
								</view>
								<!-- <view class="f2 c_sed" :class="{'tab4':item.Item[0].Status == -1 || item.Item[0].Status == 3}">{{getBallyuyue(item.Item[0])}}</view> -->
							</view>

						</view>
						<!-- <view v-if="item.Item[0].Status == -1 || item.Status == -1" class="Shadowbox">
						</view> -->
					</view>
				</view>
				<block v-else>
					<u-empty mode="list" width="64" height="64"
						icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/community/20230510114106.png" :show="true" iconSize="32"
						text="无预约"></u-empty>

				</block>
				<view style="height: 200rpx;"></view>
			</view>
		</x-scroll>
	</view>
</template>

<script>
	import imgbox from "@/pages/ball/components/imgbox/imgbox.vue";
	import topStatus from "@/components/topStatus/topStatus.vue";

	export default {
		tabTop: 0,
		components: {
			imgbox,
			topStatus
		},
		data() {
			return {
				privatelist:[], // 私人球局列表
				ossPath:null,
				IsExpiredUser: {

				},
				IsTrueName: false,
				userNums: {},
				_freshing: true,
				load: false,
				ballTab: 0,
				user: {},
				tabInd: 0,
				showTop: false,

				// 我发起的组局
				MyApplyList: {
					list: [],
					PageIndex: 1,
					PageSize: 15
				},
				// 我报名的组局
				MyTakeList: {
					list: [],
					PageIndex: 1,
					PageSize: 15
				},
				MyRegisterList: {
					list: [],
					PageIndex: 1,
					PageSize: 15
				}
			}
		},
		computed: {
			// 我发起的组局状态
			getBallStatusStr() {
				return obj => {
					let str = "";
					if (obj.Status == 0) {
						str = "待开局";

					} else if (obj.Status == 1) {
						str = "进行中";
					} else if (obj.Status == 2) {
						str = "已发奖励"
					} else if (obj.Status == 3) {
						str = "已结束"
					} else if (obj.Status == -1) {
						str = "已经取消"
					}

					return str;
				}
			},
			//我预约的
			getBallyuyue() {
				return obj => {
					let str = "";
					if (obj.Status == 0) {
						str = "预约中";

					} else if (obj.Status == 1) {
						str = "预约成功";
					} else if (obj.Status == 2) {
						str = "已发奖励"
					} else if (obj.Status == 3) {
						str = "已结束"
					} else if (obj.Status == -1) {
						str = "已拒绝"
					}

					return str;
				}
			},
			getUserType(l) {
				return l => {
					if (l.indexOf('年') != -1) {
						return 2
					} else if (l.indexOf('金') != -1) {
						return 1
					} else {
						return 0
					}
				}
			},
			getTime2() {
				return l => {
					let d = new Date(l);
					let timestamp = d.getTime();
					return this.$u.date(timestamp, 'mm-dd');
				}
			},
			getTime3() {
				return l => {
					let d = new Date(l);
					let timestamp = d.getTime();
					return this.$u.date(timestamp, 'yyyy-mm-dd');
				}
			},
			getWeek() {
				return l => {
					let d = new Date(l);
					// d.getDate();
					// console.log(d.getDay());
					let week = d.getDay();
					let weelStr = week == 0 ? '星期天' : week == 1 ? '星期一' : week == 2 ? '星期二' : week == 3 ? '星期三' : week == 4 ?
						'星期四' : week == 5 ? '星期五' : '星期六';
					return weelStr;
				}
			}
		},
		methods: {
			setBg() {
				let _this = this;
				uni.chooseMedia({
					count: 1, //默认9
					mediaType: ['image'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: async function(res) {
						console.log(res, "------look")
						let r = await _this.uploading(res.tempFiles[0].tempFilePath);
						let b = await _this.$api.post('User/UpdateUserBG', { BgImg: r, userID: _this.user.UserID });
						setTimeout(async () => {
							await _this.getUserInfo();
						}, 500)
						console.log(b);
					}
				})
			},

			// 文件上传
			async uploading(url, tempKey) {
				if (tempKey) {
					let r = await this.$api.upload(
						"/Community/Upload", {
							path: url,
						},
						(pro) => {
							this.localList.forEach((item) => {
								if (item.tempKey == tempKey) {
									item.pro = pro;
								}
							});
						}
					);
					this.localList.forEach((item) => {
						if (item.tempKey == tempKey) {
							item.netPath = r;
						}
					});

				} else {
					let _this = this;
					let r = await this.$api.upload('/Community/Upload', {
						path: url
					}, pro => {
						if (pro != 100) {
							_this.$pv.load('已上传' + pro + '%')
						} else {
							_this.$pv.closeLoad();
						}

						console.log(pro);
						// this.localList.forEach(item => {
						//     if(item.tempKey == tempKey){
						//         item.pro = pro;
						//     }
						// })
					});
					return r;
				}

			},

			// 切换
			setTab(e) {
				this.tabInd = e;
				if (this.tabInd == 0) {
					this.MyApplyList = {
						list: [],
						PageIndex: 1,
						PageSize: 15
					}
					this.getMyApply();

				} else if (this.tabInd == 1) {
					this.MyTakeList = {
						list: [],
						PageIndex: 1,
						PageSize: 15
					}

					this.getMyTake();
				} else {
					this.MyRegisterList = {
						list: [],
						PageIndex: 1,
						PageSize: 15
					}
					this.getMyRegister();
				}
			},
			// 滚动
			scroll(e) {
				let top = e.detail.scrollTop;
				if (top > (this.tabTop - 44)) {
					this.showTop = true;
				} else {
					this.showTop = false;
				}
			},
			//下拉刷新
			async onRefresh() {
				this.getUserInfo();

				if (this.tabInd == 0) {
					this.MyApplyList.PageIndex = 1;
					this.MyApplyList.PageSize = 15;
					await this.getMyApply();

				} else if (this.tabInd == 1) {
					this.MyTakeList.PageIndex = 1;
					this.MyTakeList.PageSize = 15;
					await this.getMyTake();
				} else {
					this.MyRegisterList.PageIndex = 1;
					this.MyRegisterList.PageSize = 15;
					await this.getMyRegister();
				}
				uni.$emit('triggered');
			},
			//滚动到底部触发
			async scrolltolower() {
				// 确定是哪一个tab 
				if (this.tabInd == 0) {
					this.MyApplyList.PageIndex++
					await this.getMyApply();

				} else if (this.tabInd == 1) {
					this.MyTakeList.PageIndex++
					await this.getMyTake();
				} else {
					this.MyRegisterList.PageIndex++
					await this.getMyRegister();
				}
			},
			// ball_details_prebook
			toMyrPrebook(item) {
				this.nav_to(`/pages/ball/reserva_details?id=${item.ID}`);
			},
			toMyAttend(item) {
				this.nav_to(`/pages/ball/ball_details?id=${item.ID}`);
			},
			toDetails(item) {
				if(item.AppointmentType == '私人球局'){
					this.nav_to(`/pages/ball/reserva_details?id=${item.ID}`)
				}else{
					this.nav_to(`/pages/ball/ball_details?id=${item.ID}`);
				}
			},
			// 去重,后面的覆盖前面的
			clearRepetition(arr, key = "id") {
				let newArr = [];
				arr.forEach(item => {
					let index;
					let check = newArr.every((newItem, i) => {
						if (item[key] !== newItem[key]) {
							index = -1;
							return true;
						} else {
							index = i;

							return false;
						}
					})
					if (check) {
						newArr.push(item);
					} else {
						newArr.splice(index, 1, item);
					}

				})
				return newArr;
			},
			async getMyApply() {
				let res = await this.$api.post('Appointment/MyApply', {
					PageIndex: this.MyApplyList.PageIndex,
					PageSize: this
						.MyApplyList.PageSize
				});
				let list = this.MyApplyList.list.concat(res.data);
				// this.MyApplyList.list = list
				// this.MyApplyList.list = this.MyApplyList.list.concat(this.MyApplyList.list)
				this.MyApplyList.list = this.clearRepetition(list, "ID");
				this.privatelist = this.MyApplyList.list.filter((item)=>{
					return item.AppointmentType == '私人球局'
				})
				console.log('----');
				console.log(this.privatelist);
			},
			async getMyTake() {
				let res = await this.$api.post('Appointment/MyTake', {
					PageIndex: this.MyTakeList.PageIndex,
					PageSize: this.MyTakeList.PageSize
				});
				if (!res.data) return
				let list = this.MyTakeList.list.concat(res.data)
				this.MyTakeList.list = this.clearRepetition(list, "ID");
			},
			async getMyRegister() {
				let res = await this.$api.post('Appointment/MyRegister', {
					PageIndex: this.MyRegisterList.PageIndex,
					PageSize: this.MyRegisterList.PageSize
				});
				if (!res.data) return
				let list = this.MyRegisterList.list.concat(res.data)
				this.MyRegisterList.list = this.clearRepetition(list, "ID");
			},
			async getIsExpiredUser() {
				let res = await this.$api.post('User/IsExpiredUser');
				this.IsExpiredUser = res.data;
			},

			lookImg(index) {
				console.log(index)
				let list = this.myImgList.map(item => item.Images);
				uni.previewImage({
					urls: list,
					current: index
				})
			},
			async init() {
				let _this = this;
				await this.getUserInfo();
				await this.getSaleChannelDetail();
				await this.getIsTrueName();
				await this.getIsExpiredUser();

				if (this.tabInd == 0) {
					await this.getMyApply();
				} else if (this.tabInd == 1) {
					await this.getMyTake();
				} else {
					await this.getMyRegister();
				}
				this.load = true;


			},
			async getSaleChannelDetail() {
				let res = await this.$api.post('/SaleChannel/SaleChannelDetail', { CompanyID: 6002 });
				this.userNums = res.data;
			},
			async getUserInfo() {
				let u = uni.getStorageSync('user');
				let res = await this.$api.post('User/GetUserInfo', { ID: u.UserID });
				this.user = res.data;
			},

			async getIsTrueName() {
				let res = await this.$api.post('User/IsTrueName')
				this.IsTrueName = res.data;
			}

		},
		onLoad(e) {
			if (e.tab) {
				this.tabInd = e.tab;
			}
			this.init();
		},
		onReady() {

		},
		onShow() {
			this.init();
			this.getUserInfo();
			this.ossPath = this.$ossPath
		},
	}
</script>

<style lang="scss">
page{
	background-color: #F6F6F6;
}

.myregbox{
	display: flex;
	justify-content: space-around;
	.leftbox{
		margin-top: 32rpx;
		text-align: center;
		.heimg{
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			margin-bottom: 16rpx;
		}
		.lename{
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 12rpx;
		}
		.Initiator{
			color: #666666;
			font-size: 24rpx;
		}
	}
	.middbox{
		margin-top: 32rpx;
		text-align: center;
		.mid_1{
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 14rpx;
		}
		.mid_2{
			width: 250rpx;
			height: 12rpx;
			margin-bottom: 24rpx;
		}
		.mid_3{
			width: 152rpx;
			height: 48rpx;
			border-radius: 27rpx;
			border: 1rpx solid #979797;
			color: rgba(255,255,255,0.6);
			font-size: 24rpx;
			text-align: center;
			line-height: 48rpx;
			margin: 0 auto;
		}
	}
	.rightbox{
		margin-top: 32rpx;
		text-align: center;
		.rightimg{
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			margin-bottom: 16rpx;
		}
		.rname{
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 12rpx;
		}
		.rstate{
			color: #666666;
			font-size: 24rpx;
		}
	}
}
	.bg {
		position: relative;
		overflow: hidden;
		width: 100%;

		image {
			position: absolute;
			top: 50%;
			left: 0;
			transform: translate(0, -50%);
			width: 100%;
		}
	}

	.nav {
		height: 44px;
		line-height: 44px;
		text-align: center;
	}

	.seat {
		position: relative;
		height: 320rpx;
		z-index: 10;

		// background: rgba(244, 255, 255, .4);
		.cover {
			position: absolute;
			left: 32rpx;
			bottom: 10rpx;
			height: 100rpx;
			width: 100rpx;
			border-radius: 8rpx;
			border: 1px solid #fff;
			overflow: hidden;

			image {
				height: 100%;
				width: 100%;
			}
		}
	}

	.con {
		position: relative;
		margin-top: -48rpx;
		background: #111111;
		border-radius: 48rpx 48rpx 0px 0px;
		padding-top: 42rpx;
		padding-bottom: 42rpx;

		// &::before{
		// 	position: absolute;
		// 	display: block;
		// 	bottom: 0;
		// 	left: 32rpx;
		// 	width: calc(100% - 64rpx);
		// 	height: 1rpx;
		// 	background: #2B2B2B;
		// 	content: "";
		// }
		.cen {
			align-items: center;
		}
	}

	.m20 {
		margin-top: 20rpx;
	}

	.brief {
		line-height: 1.8;
	}

	.flx {
		// margin-top: 20rpx;
	}

	.btn_plain {
		height: 60rpx;
		width: 160rpx;
		color: #FEF0BC;
		font-size: 24rpx;
		border: 1px solid #FEF0BC;
		text-align: center;
		line-height: 60rpx;
		border-radius: 60rpx;
	}

	.flx {
		display: flex;
		justify-content: space-between;
	}

	.pl10 {
		padding-left: 10rpx;
	}

	.left {
		display: flex;
	}

	.group {
		padding-left: 20rpx;
	}

	.tabs {
		// position: sticky;
		// top: 0;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background: #fff;

		.tabs_item {
			height: 100rpx;
			line-height: 100rpx;
			padding-left: 12rpx;
			padding-right: 12rpx;
			color: #999999;
		}

		.tabs_item_curr {
			color: #333333;
			font-weight: bolder;
			position: relative;

			&::before {
				display: block;
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 4rpx;
				border-radius: 4rpx;
				background: #333333;
			}
		}
	}

	.tap {
		position: fixed;
		top: 0;
		background: #fff;
		width: 100%;
		z-index: 888;
	}

	.ball {
		padding-bottom: 30rpx;

		.tag_group {
			padding-top: 20rpx;
			display: flex;

			.tag {
				margin-right: 16rpx;
				height: 32rpx;
				line-height: 32rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;
				background: #262626;
				font-size: 24rpx;
				color: #7B7B7B;
				border-radius: 50rpx;
			}

			.tag_curr {
				color: #FEF0BC;
				background: rgba(254, 240, 188, 0.2);
			}
		}

	}

	.ball_list {
		margin-top: 20rpx;

		.item {
			margin-top: 20rpx;
			background: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			padding-bottom: 20rpx;
			view{color: #333;}
			.item_hd {
				padding-left: 20rpx;
				padding-right: 20rpx;
				display: flex;
				justify-content: space-between;
				height: 100rpx;
				align-items: center;

				.cover {
					height: 72rpx;
					width: 72rpx;
					border: 1px solid #7B7B7B;
					border-radius: 50%;
					overflow: hidden;

					image {
						height: 100%;
						width: 100%;
					}
				}


			}

			.item_bd {
				padding-left: 24rpx;
				padding-right: 24rpx;
				padding-top: 20rpx;
				padding-bottom: 20rpx;

				.lin {
					line-height: 50rpx;
				}

				.imgbox_sm {
					height: 28rpx;
					width: 28rpx;
					// background: #fff;
					display: inline-block;
					// vertical-align: middle;
					margin-left: 6rpx;
					margin-right: 6rpx;
					font-size: 0;
					vertical-align: initial;
					image {
						height: 100%;
						width: 100%;
					}
				}
				.textcolor1{
					color: #FF7713;
				}
				.textcolor2{
					color: #2BA139;
				}
				.textcolor3{
					color: #999999;
				}
			}

			.item_ft {
				margin-left: 20rpx;
				margin-right: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 100rpx;
				background: #262626;

				.cover_group {
					display: flex;
				}

				.cover {
					margin-right: -15rpx;
					height: 48rpx;
					width: 48rpx;
					border-radius: 48rpx;
					border: 1px solid #7B7B7B;
					overflow: hidden;

					image {
						height: 100%;
						width: 100%;
					}

					&:last-child {
						margin-right: 0;
					}
				}

				.nums {
					line-height: 28 * 2rpx;
					margin-left: 16rpx;
				}

				.tip {
					margin-left: 16rpx;
				}

			}

			.left {
				display: flex;
				align-items: center;
				flex: 1;
			}

		}
	}

	.myimg {
		.col_8 {
			margin-top: 15rpx;
			box-sizing: border-box;

			&:nth-child(3n+1) {
				padding-right: 6rpx;
			}

			&:nth-child(3n+3) {
				padding-left: 6rpx;
			}

			&:nth-child(3n+2) {
				padding-left: 3rpx;
				padding-right: 3rpx;
			}
		}

	}

	.myvideo {
		.col_8 {
			position: relative;
			margin-top: 15rpx;
			box-sizing: border-box;

			.play_icon {
				position: absolute;
				top: 12rpx;
				right: 12rpx;
				height: 44rpx;
				width: 44rpx;
				// background: #0f0;	
				z-index: 20;

				image {
					height: 100%;
					width: 100%;
				}

			}

			&:nth-child(3n+1) {
				padding-right: 6rpx;

				.play_icon {
					right: 12 + 6rpx;
				}
			}

			&:nth-child(3n+3) {
				padding-left: 6rpx;

				.play_icon {
					right: 12rpx;
				}
			}

			&:nth-child(3n+2) {
				padding-left: 3rpx;
				padding-right: 3rpx;

				.play_icon {
					right: 12 + 3rpx;
				}
			}
		}

	}

	.pl16 {
		padding-left: 16rpx;
	}

	.mr30 {
		margin-right: 30rpx;
	}

	.f40 {
		font-size: 40rpx;
	}

	.c_red {
		color: #e46534;
	}

	.tag {
		display: inline-block;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-radius: 5rpx;
		background: #FEF0BC;
		font-size: 24rpx;
		height: 30rpx;
		line-height: 32rpx;
		margin-left: 20rpx;
		color: #000;
	}

	.number_play {
		height: 50rpx;
		line-height: 50rpx;
	}

	.rember {
		width: 702rpx;
		margin-top: 20rpx;
		height: 164rpx;
		margin-left: auto;
		margin-right: auto;

		image {
			height: 100%;
			width: 100%;
		}
	}

	.flx_l {
		display: flex;
		align-items: center;
	}

	.lh {
		line-height: 1;
	}

	.mt20 {
		margin-top: 10rpx;
	}


	.real {
		height: 64rpx;
		line-height: 64rpx;
		// background: #FDEFBB;
		color: #fff;
		text-decoration: underline;
		text-align: center;
	}

	.integral {
		border-radius: 16rpx;
		background: #262626;
		overflow: hidden;
		height: 152rpx;

		.col_6 {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}

	.f36 {
		margin-bottom: 15rpx;
		font-size: 36rpx;
		line-height: 36rpx;
		height: 36rpx;
	}

	.mb20 {
		margin-bottom: 20rpx;
	}

	.pl10 {
		padding-left: 10rpx;
	}

	.rqCode {
		height: 40rpx;
		width: 40rpx;
	}

	.tag_tip {
		margin-top: 20rpx;
		height: 70rpx;
		background: rgba(254, 240, 188, 0.2);
		border-radius: 4rpx;
		color: #FEF0BC;
		line-height: 70rpx;
		text-align: center;
		font-size: 24rpx;
	}

	.set_bg {
		position: absolute;
		text-align: center;
		line-height: 70rpx;
		right: 32rpx;
		bottom: 57rpx;
		height: 70rpx;
		width: 70rpx;
		// background: #0f0;
	}

	.name {
		// max-width: 240rpx;
	}
</style>